//
// Color swatch styles
//

colorswatch
{
    //
    // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
    // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
    // applied to the overlay box.
    //

    // FIXME: implement a proper drop(active) state
    //
    &:drop(active),
    &
    {
        border-style: none;
    } 
    
    $_colorswatch_radius: 5px;
    
    //
    // base color corners rounding
    // to avoid the artifacts caused by rounded corner anti-aliasing the base color
    // sports a bigger radius.
    // nth-child is needed by the custom color strip.
    //
    
    &.top
    {
        border-top-left-radius:  $_colorswatch_radius + 0.5px;
        border-top-right-radius: $_colorswatch_radius + 0.5px;
        
        overlay
        {
            border-top-left-radius:  $_colorswatch_radius;
            border-top-right-radius: $_colorswatch_radius;
        }
    }
    
    &.bottom
    {
        border-bottom-left-radius:  $_colorswatch_radius + 0.5px;
        border-bottom-right-radius: $_colorswatch_radius + 0.5px;
        
        overlay
        {
            border-bottom-left-radius:  $_colorswatch_radius;
            border-bottom-right-radius: $_colorswatch_radius;
        }
    }
    
    &.left,
    &:first-child:not(.top)
    {
        border-top-left-radius:    $_colorswatch_radius + 0.5px;
        border-bottom-left-radius: $_colorswatch_radius + 0.5px;

        overlay
        {
            border-top-left-radius:    $_colorswatch_radius;
            border-bottom-left-radius: $_colorswatch_radius;
        }
    }
    
    &.right,
    &:last-child:not(.bottom)
    {
        border-top-right-radius:    $_colorswatch_radius + 0.5px;
        border-bottom-right-radius: $_colorswatch_radius + 0.5px;
        
        overlay
        {
            border-top-right-radius:    $_colorswatch_radius;
            border-bottom-right-radius: $_colorswatch_radius;
        }
    }
    
    &.dark
    {
        outline-color: transparentize(white, 0.4);
        
        overlay
        {
            color: #FFFFFF;
            
            &:hover
            {
                border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
            }
            
            &:backdrop
            {
                color: transparentize(#FFFFFF, 0.5);
            }
        }
    }
    
    &.light
    {
        outline-color: transparentize(#000000, 0.4);
        
        overlay
        {
            color: #000000;
            
            &:hover
            {
                border-color: if($variant == 'light', transparentize(#000000, 0.5), $borders_color);
            }
            
            &:backdrop
            {
                color: transparentize(#000000, 0.5);
            }
        }
    }
    
    &:drop(active)
    {
        box-shadow: none;
        
        &.light overlay
        {
            border-color: $drop_target_color;
            
            box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
                        inset 0 0 0 1px $drop_target_color;
        }
        
        &.dark overlay
        {
            border-color: $drop_target_color;

            box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(#000000, 0.7), $borders_color),
                        inset 0 0 0 1px $drop_target_color;
        }
    }
    
    overlay
    {
        border: 1px solid if($variant == 'light', transparentize(#000000, 0.7), $borders_color);
        
        &:hover
        {
            box-shadow: inset 0  1px transparentize(#FFFFFF, 0.6),
                        inset 0 -1px transparentize(#000000, 0.8);
        }
        
        &:backdrop,
        &:backdrop:hover
        {
            border-color: if($variant == 'light', transparentize(#000000, 0.7), $borders_color);
            box-shadow:   none;
        }
    }
    
    &#add-color-button
    {
        border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
        
        &:only-child
        {
            border-radius: $_colorswatch_radius;
        }
        
        overlay
        {
            @include button(normal);
            
            &:hover    { @include button(hover);    }
            &:backdrop { @include button(backdrop); }
        }
    }
    
    &:disabled
    {
        opacity: 0.5;
        
        overlay
        {
            border-color: transparentize(#000000, 0.4);
            box-shadow:   none;
        }
    }
    
    row:selected &
    {
        box-shadow: 0 0 0 2px $selected_fg_color;
    }
    
    &#editor-color-sample
    {
        border-radius: 4px;
        
        overlay
        {
            border-radius: 4.5px;
        }
    }
}

// Colorscale popup
//
colorchooser .popover.osd
{
    border-radius: 5px;
}
